<template>
  <view class="container">
    <view style="font-weight: bold; font-size: 48rpx; color: #151515">我的居住城市</view>
    <view style="font-weight: 500; font-size: 24rpx; color: #ff3742">优先给您推荐本地群组</view>
    <view class="btn" @click="$refs.popup.open()">
      <image src="../../static/loginimg/position.png" style="width: 30rpx; height: 30rpx; vertical-align: middle" mode=""></image>
      <text style="font-weight: bold; font-size: 28rpx; color: #151515">{{ currentcity ? currentcity : '一键获取地区' }}</text>
    </view>
    <view :class="{ unsub: currentcity == '', common: currentcity != '' }" style="position: fixed; bottom: 68rpx; right: 40rpx" @click="reigister">提交</view>
    <uni-popup ref="popup" type="bottom">
      <view class="box">
        <veiw class="header">
          <view style="color: #afa6ab" @click="$refs.popup.close()">取消</view>
          <view style="font-size: 30rpx; color: #1d202c; font-weight: 800">选择你居住的城市</view>
          <view style="color: #26a089" @click="savedate">确定</view>
        </veiw>
        <!-- 选择器 -->
        <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item, index) in province" :key="index">{{ item.name }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in city[0].children" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      provinceidnex: 0,
      province: [],
      value: [0, 1],
      cityindex: 0,
      indicatorStyle: `height: 50px;`,
      currentcity: ''
    };
  },
  computed: {
    city() {
      return this.province.filter((item) => {
        return item.name == this.province[this.provinceidnex].name;
      });
    }
  },
  onLoad() {
    this.getcitylist();
  },
  methods: {
    // 注册
    reigister() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    // 保存日期
    async savedate() {
      this.currentcity = this.province[this.provinceidnex].children[this.cityindex].name;
      const res = await this.http('/user/profile', {
        province: this.province[this.provinceidnex].name,
        citys: this.province[this.provinceidnex].children[this.cityindex].name
      });
      console.log('地区----', res);
      this.$refs.popup.close();
    },
    // 获取城市列表
    async getcitylist() {
      const res = await this.http('/group/getCityList');
      console.log('城市列表', res);
      this.province = res.data;
    },
    // 切换
    bindChange(e) {
      // 省份的index
      console.log(e.detail.value[0]);
      this.provinceidnex = e.detail.value[0];
      this.cityindex = e.detail.value[1];
    }
  }
};
</script>

<style lang="scss" scoped>
.picker-view {
  width: 750rpx;
  height: 600rpx;
  margin-top: 20rpx;
}
.item {
  line-height: 100rpx;
  text-align: center;
}
.container {
  box-sizing: border-box;
  padding: 0 48rpx;
  padding-top: 68rpx;
  .box {
    box-sizing: border-box;
    width: 750rpx;
    height: 800rpx;
    border-radius: 18rpx 18rpx 0rpx 0rpx;
    padding: 30rpx;
    background-color: #fff;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  .btn {
    width: 670rpx;
    height: 100rpx;
    background: #feff01;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    text-align: center;
    line-height: 100rpx;
    margin-top: 42rpx;
  }
  .unsub {
    width: 252rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    background: #cccfdb;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  .common {
    width: 252rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;

    border-radius: 100rpx 100rpx 100rpx 100rpx;
    background-color: #feff01;
  }
}
</style>
